<template>
  <main class="page">
    <slot name="top" />

    <div class="row theme-gitfe-page">
      <div class="col-md-10">
        <Content class="theme-gitfe-content" />
        <Vssue class="theme-gitfe-content" :title="title" />
      </div>
      <div class="col-md-2">  
        <div class="gitfe-page-toc">
          <ul class="sidebar-links theme-gitfe-page-sider sidebar-sub-header">
            <li v-for="header in headers">
              <!-- <a :href="'#'+ header.title">{{header.title}}</a> -->
              <router-link active-class="current" :to="'#'+ header.title">{{header.title}}</router-link>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <footer class="page-edit">
      <div class="edit-link" v-if="editLink">
        <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
        <OutboundLink />
      </div>

      <div class="last-updated" v-if="lastUpdated">
        <span class="prefix">{{ lastUpdatedText }}:</span>
        <span class="time">{{ lastUpdated }}</span>
      </div>
    </footer>

    <div class="page-nav" v-if="prev || next">
      <p class="inner">
        <span v-if="prev" class="prev">
          ←
          <router-link v-if="prev" class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
        </span>

        <span v-if="next" class="next">
          <router-link v-if="next" :to="next.path">{{ next.title || next.path }}</router-link>→
        </span>
      </p>
    </div>

    <slot name="bottom" />
  </main>
</template>

<script>
import { resolvePage, outboundRE, endingSlashRE } from "../util";
import SidebarGroup from "@theme/components/SidebarGroup.vue";
import SidebarLink from "@theme/components/SidebarLink.vue";
export default {
  props: ["sidebarItems", "item", "open", "collapsable", "depth"],
  created() {
    // this.title = this.$page.title
    console.log("sidebarItems", this.$page);
  },
  components: { SidebarGroup, SidebarLink },
  data() {
    return {
      // title: ''
    };
  },
  computed: {
    title() {
      console.log("title", this.$page.title);
      return this.$page.title;
    },
    headers() {
      console.log("title", this.$page.title);
      return this.$page.headers;
    },
    lastUpdated() {
      return this.$page.lastUpdated;
    },

    lastUpdatedText() {
      if (typeof this.$themeLocaleConfig.lastUpdated === "string") {
        return this.$themeLocaleConfig.lastUpdated;
      }
      if (typeof this.$site.themeConfig.lastUpdated === "string") {
        return this.$site.themeConfig.lastUpdated;
      }
      return "Last Updated";
    },

    prev() {
      const prev = this.$page.frontmatter.prev;
      if (prev === false) {
        return;
      } else if (prev) {
        return resolvePage(this.$site.pages, prev, this.$route.path);
      } else {
        return resolvePrev(this.$page, this.sidebarItems);
      }
    },

    next() {
      const next = this.$page.frontmatter.next;
      if (next === false) {
        return;
      } else if (next) {
        return resolvePage(this.$site.pages, next, this.$route.path);
      } else {
        return resolveNext(this.$page, this.sidebarItems);
      }
    },

    editLink() {
      if (this.$page.frontmatter.editLink === false) {
        return;
      }
      const { repo, editLinks, docsDir = "", docsBranch = "master", docsRepo = repo } = this.$site.themeConfig;

      if (docsRepo && editLinks && this.$page.relativePath) {
        return this.createEditLink(repo, docsRepo, docsDir, docsBranch, this.$page.relativePath);
      }
    },

    editLinkText() {
      return this.$themeLocaleConfig.editLinkText || this.$site.themeConfig.editLinkText || `Edit this page`;
    }
  },

  methods: {
    renderLink(h, to, text, active) {
      return h(
        "router-link",
        {
          props: {
            to,
            activeClass: "",
            exactActiveClass: ""
          },
          class: {
            active,
            "sidebar-link": true
          }
        },
        text
      );
    },
    renderChildren(h, children, path, route, maxDepth, depth = 1) {
      if (!children || depth > maxDepth) return null;
      return h(
        "ul",
        { class: "sidebar-sub-headers" },
        children.map(c => {
          const active = isActive(route, path + "#" + c.slug);
          // return h('li', { class: 'sidebar-sub-header' }, [
          //   renderLink(h, path + '#' + c.slug, c.title, active),
          //   renderChildren(h, c.children, path, route, maxDepth, depth + 1)
          // ])
        })
      );
    },
    createEditLink(repo, docsRepo, docsDir, docsBranch, path) {
      const bitbucket = /bitbucket.org/;
      if (bitbucket.test(repo)) {
        const base = outboundRE.test(docsRepo) ? docsRepo : repo;
        return base.replace(endingSlashRE, "") + `/src` + `/${docsBranch}/` + (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") + path + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`;
      }

      const base = outboundRE.test(docsRepo) ? docsRepo : `https://github.com/${docsRepo}`;
      return base.replace(endingSlashRE, "") + `/edit` + `/${docsBranch}/` + (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") + path;
    }
  }
};

function resolvePrev(page, items) {
  return find(page, items, -1);
}

function resolveNext(page, items) {
  return find(page, items, 1);
}

function find(page, items, offset) {
  const res = [];
  flatten(items, res);
  for (let i = 0; i < res.length; i++) {
    const cur = res[i];
    if (cur.type === "page" && cur.path === decodeURIComponent(page.path)) {
      return res[i + offset];
    }
  }
}

function flatten(items, res) {
  for (let i = 0, l = items.length; i < l; i++) {
    if (items[i].type === "group") {
      flatten(items[i].children || [], res);
    } else {
      res.push(items[i]);
    }
  }
}
</script>

<style lang="stylus">
@require '../styles/wrapper.styl';

.page {
  padding-bottom: 2rem;
  display: block;
}

.page-edit {
  @extend $wrapper;
  padding-top: 1rem;
  padding-bottom: 1rem;
  overflow: auto;

  .edit-link {
    display: inline-block;

    a {
      color: lighten($textColor, 25%);
      margin-right: 0.25rem;
    }
  }

  .last-updated {
    float: right;
    font-size: 0.9em;

    .prefix {
      font-weight: 500;
      color: lighten($textColor, 25%);
    }

    .time {
      font-weight: 400;
      color: #aaa;
    }
  }
}

.page-nav {
  @extend $wrapper;
  padding-top: 1rem;
  padding-bottom: 0;

  .inner {
    min-height: 2rem;
    margin-top: 0;
    border-top: 1px solid $borderColor;
    padding-top: 1rem;
    overflow: auto; // clear float
  }

  .next {
    float: right;
  }
}

@media (max-width: $MQMobile) {
  .page-edit {
    .edit-link {
      margin-bottom: 0.5rem;
    }

    .last-updated {
      font-size: 0.8em;
      float: none;
      text-align: left;
    }
  }
}
</style>
